<template>
  <div class="truck-choose-wrapper">
    <el-dialog
      title="选择车辆"
      :visible.sync="dialogVisible"
      width="800px  "
      :before-close="handleClose"
    >
      <div class="dialog-container">
        <div class="container">
          <section class="left-container">
            <el-tree
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              node-key="id"
              :default-expanded-keys="idArr"
              @node-click="getList3"
            >
              <section class="custom-tree-node" slot-scope="{ node, data }">
                <section style="width: 100px">{{ node.label }}</section>
              </section>
            </el-tree>
          </section>
          <section class="right-container">
            <el-input v-model="inputName" @input=" getList2 ($event,true)" placeholder="输入车牌号">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-table
              size="mini"
              v-loading="loading"
              :data="tableData"
              style="width: 100%; margin-top: 10px"
              border
              :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="truckNumber"
                label="车牌号"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="axle.axle"
                label="车轴类型"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="操作" width="75px">
                <template slot-scope="scope">
                  <span></span>
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="selectRow(scope.row)"
                  >选择
                  </el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :page-size="page.pageSize"
              :current-page="page.pageNo"
              layout="total,prev, pager, next"
              :total="page.total"
            >
            </el-pagination>
          </section>
        </div>
<!--        <div class="dialog-footer">-->
<!--          <span slot="footer">-->
<!--            <el-button-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              @click="doSubmit()"-->
<!--              v-noMoreClick-->
<!--            >确定</el-button-->
<!--            >-->
<!--            <el-button size="small" @click="close()">取消</el-button>-->
<!--          </span>-->
<!--        </div>-->
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getList } from '@/api/truck/truckDriver.js'
  import {
    getTreeData
  } from '@/api/truck/truckGroup.js'
  export default {
    data () {
      return {
        tableData: [],
        loading: false,
        dialogVisible: false,
        inputName: '',
        data: [],
        idArr: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        },
        defaultProps: {
          // 修改el-tree默认data数组参数
          label: 'names',
          id: 'id',
          parentId: 'parentId',
          children: 'children'
        }
      }
    },
    methods: {
      getGroupList (id) {
        getTreeData({ id: id
        }).then((res) => {
          if (res.data.code === '200') {
            this.data = res.data.result
            this.data.forEach(m => {
              this.idArr.push(m.id)
            })
          }
        })
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getTruckList(this.page)
      },
      // 获取列表
      getTruckList (params, truckGroup) {
        getList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          truckGroup: truckGroup
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
        })
      },

      // 点击树获取列表和搜索获取列表
      getList2 ($event, isSearch) {
        if (isSearch) {
          getList({name: $event}).then((res) => {
            if (res.data.code === '200') {
              this.tableData = res.data.result.list
              this.page.total = res.data.result.count
            }
          })
        }
      },
      getList3 ($event) {
        getList({'truckGroup': $event.id}).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
        })
      },

      tableRowClassName ({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      // 选择行
      selectRow (row) {
        this.$emit('getTruckData', row)
        this.dialogVisible = false
      },

      handleClose (done) {
        done()
      },
      close () {
      },
      doSubmit () {
      }
    },
    mounted () {
      this.getGroupList(0)
      this.getTruckList(this.page)
    }
  }
</script>
<style scoped lang="scss">
  .dialog-container {
    width: 100%;
  }

  .container {
    width: 100%;
    /*height: 500px;*/
    display: flex;
  }



  .dialog-footer {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .truck-choose-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        padding: 20px 20px 24px !important;
        .left-container {
          width: 180px;
          overflow: auto; //!*当内容超过，出现滚动条*!
          background: #FFFFFF;
          box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);
          border-radius: 6px;
          // margin-right: 10px;
          height: 450px;
        }
        .right-container{
          width: 100%;
          margin-left: 10px;
        }
        .right-container>.el-input {
          width: 260px;
          height: 32px;

          input {
            width: 260px;
            height: 32px;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            color: #333333;
          }

          input:hover, input:focus {
            border-color: #1890ff;
          }

          .el-input__inner::-webkit-input-placeholder {
            color: #999999;
          }
          .el-input__suffix-inner{
            .el-icon-search{
              line-height: 32px;
            }
          }
        }
      }
    }
  }
</style>
